/* 
 @description: 网点JS

 @author: 韦淇霰

 @update: 2021年9月9日23:11:35
 */
 var token=localStorage.getItem('mytoken')
    const add= document.getElementById('add'),
    input =document.querySelector('input'),
    back = document.querySelector('.back'),
    box = document.querySelector('.box')
    submit = document.getElementById('submit'),
    closes = document.getElementById('closes'),
    search = document.querySelector('.Search'),
    area = document.getElementById('area'),
    city = document.getElementById('city'),
    spot = document.getElementById('spot'),
    table = document.getElementById('tab');
    let isEdit = 0;

  //开始拖拽
    //1.鼠标按下的时候，获得鼠标在盒子内的坐标
    back.addEventListener('mousedown',function(e){
        var x = e.pageX - box.offsetLeft;
        var y = e.pageY - box.offsetTop;
        //2.鼠标移动的时候，把鼠标在页面中的坐标 减去 鼠标在盒子中的坐标，得到盒子的left和top
        document.addEventListener('mousemove',move)  
        function move(e) {
            box.style.left = e.pageX - x +'px';
            box.style.top = e.pageY - y + 'px';
        }
        //3.鼠标弹起，就让鼠标移动事件移除
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move);
        })
    })
//选择下拉框
  var aProvince = ["广西壮族自治区", "广东省", "浙江省", "云南省", "河北省", "山西省", '辽宁省', '吉林省', '黑龙江省', '江苏省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '海南省', '四川省', '甘肃省', '青海省', '台湾省', '内蒙古自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区'];
  var aCity = [
    ["南宁市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "钦州市", "贵港市", "玉林市", "百色市", "贺州市", "河池市", "来宾市", "崇左市"],
                ['广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市', '江门市', '湛江市', '茂名市', "肇庆市", '惠州市', "梅州市", "汕尾市", "河源市", "阳江市", "清远市", "东莞市", "中山市", "潮州市", "揭阳市", "云浮市"],
                ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
                ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '思茅市', '临沧市', '景洪市', '楚雄市', '大理市', '潞西市'],
                ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"],
                ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'],
                ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '葫芦岛市', '朝阳市'],
                ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市'],
                ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市'],
                ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
                ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],
                ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'],
                ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'],
                ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'],
                ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'],
                ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市'],
                ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市'],
                ['海口市', '三亚市', '三沙市', '儋州市'],
                ['宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市'],
                ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市'],
                ['西宁市', '海东市', '海北藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
                ['台北', '高雄', '基隆', '台中', '台南', '新竹', '嘉义', '新北', '桃园', '宜兰县', '新竹县', '苗栗县', '彰化县', '南投县', '云林县', '嘉义县', '屏东县', '台东县', '花莲县', '澎湖县'],
                ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'],
                ['拉萨市', '日喀则市', '昌都市', '林芝市', '山南市', '那曲市', '阿里地区'],
                ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'],
                ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治州', '阿克苏地区', '喀什地区', '和田地区', '塔城地区', '阿勒泰地区'],
                ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区'],
                ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区', '宁河区', '静海区', '蓟州区'],
                ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '奉贤区', '崇明区'],
                ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '綦江区', '大足区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '璧山区', '铜梁区', '潼南区', '荣昌区', '开州区', '梁平区', '武隆区'],
                ['中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '屯门区', '元朗区', '北区', '大埔区', '西贡区', '沙田区', '葵青区', '离岛区'],
                ['花地玛堂区', '圣安多尼区', '大堂区', '望德堂区', '风顺堂区', '嘉模堂区', '圣方济各唐区', '路氹城', '澳门新城区'],
  ];
  var num1 = 0;
  var num2 = 0;
  $(function () {
      //循环出省
      for (var i = 0; i < aProvince.length; i++) {
         $("#area").append(" <option>" + aProvince[i] + "</option>");
    //    $("#area").val($("this")).text();
      }
      
      $("#area").change(function () {
          $("#city").children("option").not(":eq(0)").remove();//去掉叠加 清空 但不包括 请选择
          $("#selCounty").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
          num1 = parseInt($(this).children("option:selected").index());//获取索引值
          if (num1 > 0) {
              var ac = aCity[num1 - 1];//去掉请选择
              for (var i = 0; i < ac.length; i++) {
                  $("#city").append(" <option>" + ac[i] + "</option>");
              }
          }
      });
  });


    getList();
        const sou = document.querySelector('#sou');
    //搜索
    function getList(keyname='') {
        $.ajax({
        url: `http://127.0.0.1:7001/api/network/new?keyname=${keyname}`,
        method: "GET",
        headers:{
            token
        },
        success: function(res) {
            console.log(res.count);
            localStorage.setItem('wdtotal',res.count);
            console.log(wdtotal);
            const pagetotal = Math.ceil(res.count / 9);
            console.log(pagetotal);
            localStorage.setItem('total',pagetotal);
                for (var i = 0; i < res.data.length; i++) {
                    // console.log(res.data[i].id);
                    const tr = document.createElement('tr');
                    for (let data in res.data[i]) {
                    const td = document.createElement("td");
                        td.innerHTML = res.data[i][data]
                        tr.appendChild(td);
                    }
                    const lasttd = document.createElement('td');
                    lasttd.innerHTML  = `<button type='button'  name="updata" class="up"  id='${res.data[i].id}'><i class="fa fa-wrench" aria-hidden="true"></i> 修改</button>
                    <button type='button' class="btn" name="delete" id='${res.data[i].id}'><i class="fa fa-trash" aria-hidden="true"></i> 删除</button>
                    `
                    tr.appendChild(lasttd)
                    tr.id = res.data[i].id;
                    table.appendChild(tr);
                }}
        }
    )}
    //添加
    function addLwl(data){
        $.ajax({
        url:`http://127.0.0.1:7001/api/network`,
        method:"post",
        data,
        headers:{
        token
    },
        success:function(res){
            if(res.code === 0){
            window.location.reload();
            closeBack();  
            }else{
                alert(res.msg);
            }
        }
    })
    }
    //删除
    function DelCa(id){
        $.ajax({
        url:`http://127.0.0.1:7001/api/network/${id}`,
        method:"delete",
        data:{
            id
        },
        success:function(res){
            window.location.reload();
        },
        error:()=>{
            console.log(1);
        }
    })
    }
    //编辑
    function EditCa( area, city, spot,id){
        $.ajax({
        url:`http://127.0.0.1:7001/api/network/${id}`,
        method:"put",
        data:{
            area,
            city,
            spot,
            id
        },
        headers:{
            token
        },
        success:function(res){
            if(res.code === 0){
            //    getList();
            window.location.reload();
            closeBack();  
            }else{
                alert(res.msg);
            }
        }
    })
    }
    //获取详情
    function getInfo(id){
        $.ajax({
        url:`http://127.0.0.1:7001/api/network/${id}`,
        method:"get",
        data:{
            id,
        },
        success: function(res) {
            console.log(res.data);
            if(res.code === 0){
                area.value = res.data.area;
                city.value = res.data.city;
                spot.value = res.data.spot;
            }else{
                alert(res.msg)
            }
            console.log(res);
        }
        
        })
    }
    let ida=0;
    //通过事件委托操作 删除和编辑
    table.onclick = function(e){
        if(e.target.className === 'btn'){
            const flag = confirm('确定删除吗');
            if(flag==true){
                DelCa(e.target.id);
            }
        }else if(e.target.className === 'up'){
            back.style.display = 'block';
            const id  = e.target.id;
               ida = id;
            getInfo(ida);
        }
    }
    //搜索按钮
    search.onclick = function(){
    const totals = localStorage.getItem('total')
        getList(sou.value);
        console.log(sou.value);
        table.innerHTML = `<tr class="tab_a">
                            <th>ID</th>
                            <th>省份</th>
                            <th>市区</th>
                            <th>详细地址</th>
                            <th>操作</th>
                            </tr>`
        function ss(keyname=''){
            $.ajax({
                url: `http://127.0.0.1:7001/api/network/new?keyname=${keyname}`,
                method: "get",
                success: function(res) {
                    console.log(res);
                    const nums = Math.ceil(res.count / 9);
                    console.log(nums);
                    const slp = new SimplePagination(nums);
                    slp.init({
                        container: '.boxs',
                        maxShowBtnCount: 3,
                        onPageChange: state => {
                           getPage(state.pageNumber);
                            // console.log('pagination change:', state.pageNumber)
                        }
                    })
                }
            })
            }
            ss(sou.value);
      
    }
      //添加按钮
    add.onclick =function(){
        back.style.display = 'block';
        ida = 0;
    }
    //取消按钮
    closes.onclick = function(){
        closeBack();
    }
    function closeBack(){
        area.value = '';
        city.value ='';
        spot.value ='';
        back.style.display = 'none';
    }
    //添加与编辑提交按钮
    submit.onclick = function(){
        if(ida){
            EditCa(
                area.value,
                city.value ,
                spot.value ,
                ida,
            )
        }else{
            addLwl({
                area : area.value,
                city : city.value,
                spot :  spot.value
            })
        }
        
    }
  //分页
    function getPage(page) {
        $.ajax({
        url: `http://127.0.0.1:7001/api/network/new?page=${page}`,
        method: "get",
        success: function(res) {
            const ul =document.querySelector('.ulTag');
            const tab=document.querySelector('#tab');
            tab.innerHTML='';
            // ul.innerHTML='';
            const tr=document.createElement('tr')
            table.innerHTML =  `<tr class="tab_a">
                                    <th>ID</th>
                                    <th>省份</th>
                                    <th>市区</th>
                                    <th>详细地址</th>
                                    <th>操作</th>
                                </tr>`
            for (var i = 0; i < res.data.length; i++) {
                const tr = document.createElement('tr');
                for (let data in res.data[i]) {
                    const td = document.createElement("td");
                    td.innerHTML = res.data[i][data]
                    tr.appendChild(td);
                }
            }
            for(const item of res.data){
                // console.log(item);
                const tr=document.createElement('tr');
                tr.innerHTML=`<td>${item.id}</td>
                    <td>${item.area}</td>
                    <td>${item.city}</td>
                    <td>${item.spot}</td>
                    <td><button type='button' name="updata" class="up"  id='${item.id}'><i class="fa fa-wrench" aria-hidden="true"></i> 修改</button>
                    <button type='button' class="btn" name="delete" id='${item.id}'><i class="fa fa-trash" aria-hidden="true"></i> 删除</button></td>
               `
               table.appendChild(tr);
            }
        },
        error:()=>{
           alert('没有找到');
        }
    }
    )}

    class SimplePagination {
        constructor(totalPageCount) {
            if (!totalPageCount) return
            this.state = {
                pageNumber: 1,
                totalPageCount
            }
        }
    
        init(paramsObj) {
            let state = this.state
            // 页面元素的外部容器
            state.container = paramsObj.container || 'body'
            // 不包括开头和结尾的两个固定按钮外，中间最多展示几个数字页码按钮
            state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5
            // 所有的页码元素，包括上一页、下一页
            state.pCName = paramsObj.pCName || 'page-li',
                // 当选中页码时添加的类名class
                state.activeCName = paramsObj.activeCName || 'page-active',
                // 代表页码数字的属性
                state.dataNumberAttr = paramsObj.dataNumberAttr || 'data-number',
                // 上一页 按钮的类名class
                state.prevCName = paramsObj.prevCName || 'page-prev',
                // 下一页 按钮的类名class
                state.nextCName = paramsObj.nextCName || 'page-next',
                // 禁用 上一页 按钮时给此按钮添加的类名class
                state.disbalePrevCName = paramsObj.disbalePrevCName || 'no-prev',
                // 禁用 下一页 按钮时给此按钮添加的类名class
                state.disbaleNextCName = paramsObj.disbaleNextCName || 'no-next',
                // 不包括 上一页 下一页 省略号 按钮的页码元素类名
                state.pageNumberCName = paramsObj.pageNumberCName || 'page-number'
            // 触发切换页面的事件
            state.swEvent = paramsObj.swEvent || 'click'
            // 切换页面时调用的函数
            state.onPageChange = paramsObj.onPageChange
            // 当需要省略符号占位时，确定 active的位置
            state.totalPageCount > state.maxShowBtnCount + 2 && (state.activePosition = Math.ceil(state.maxShowBtnCount / 2))
            this.renderPageDOM()
        }
    
        switchPage() {
            let state = this.state
            let pCNameList = this.selectorEle('.' + state.pCName, true)
            let pageNumber
            pCNameList.forEach(item => {
                item.addEventListener(state.swEvent, e => {
                    const currentPageEle = e.target
                    if (this.hasClass(currentPageEle, state.activeCName)) return
                    let dataNumberAttr = currentPageEle.getAttribute(state.dataNumberAttr)
                    if (dataNumberAttr) {
                        // 点击 数字 按钮
                        pageNumber = +dataNumberAttr
                    } else if (this.hasClass(currentPageEle, state.prevCName)) {
                        // 点击 上一页 按钮
                        state.pageNumber > 1 && (pageNumber = state.pageNumber - 1)
                    } else if (this.hasClass(currentPageEle, state.nextCName)) {
                        // 点击 下一页 按钮
                        state.pageNumber < state.totalPageCount && (pageNumber = state.pageNumber + 1)
                    }
                    pageNumber && this.gotoPage(pageNumber)
                })
            })
        }
        gotoPage(pageNumber) {
            let state = this.state
            let evaNumberLi = this.selectorEle('.' + state.pageNumberCName, true)
            let len = evaNumberLi.length
            if (!len || this.isIllegal(pageNumber)) return
            // 清除 active 样式
            this.removeClass(this.selectorEle(`.${state.pCName}.${state.activeCName}`), state.activeCName)
            if (state.activePosition) {
                let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1
                // 左边不需要出现省略符号占位
                if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
                    if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
                        for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                            evaNumberLi[i].innerText = i + 1
                            evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1)
                        }
                    }
                    this.hiddenEllipse('.ellipsis-head')
                    this.hiddenEllipse('.ellipsis-tail', false)
                    this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
                }
                // 两边都需要出现省略符号占位
                if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
                    // 针对 maxShowBtnCount===1 的特殊处理
                    this.hiddenEllipse('.ellipsis-head', pageNumber === 2 && state.maxShowBtnCount === 1)
                    this.hiddenEllipse('.ellipsis-tail', false)
                    for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                        evaNumberLi[i].innerText = pageNumber + (i - state.activePosition)
                        evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
                    }
                    this.addClass(evaNumberLi[state.activePosition], state.activeCName)
                }
                // 右边不需要出现省略符号占位
                if (pageNumber >= rEllipseSign) {
                    this.hiddenEllipse('.ellipsis-tail')
                    this.hiddenEllipse('.ellipsis-head', false)
                    if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
                        for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
                            evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1
                            evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
                        }
                    }
                    this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName)
                }
            } else {
                // 不需要省略符号占位
                this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
            }
            state.pageNumber = pageNumber
            state.onPageChange && state.onPageChange(state)
            // 判断 上一页 下一页 是否可使用
            this.switchPrevNextAble()
        }
    
        switchPrevNextAble() {
            let state = this.state
            let prevBtn = this.selectorEle('.' + state.prevCName)
            let nextBtn = this.selectorEle('.' + state.nextCName)
            // 当前页已经是第一页，则禁止 上一页 按钮的可用性
            state.pageNumber > 1 ?
                (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName)) :
                (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName))
            // 当前页已经是最后一页，则禁止 下一页 按钮的可用性
            state.pageNumber >= state.totalPageCount ?
                (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName)) :
                (this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName))
        }
    
        renderPageDOM() {
            // 渲染页码DOM
            let state = this.state
            let pageContainer = this.selectorEle(state.container)
            if (!pageContainer) return
            let {
                totalPageCount,
                pCName,
                prevCName,
                disbalePrevCName,
                pageNumberCName,
                activeCName,
                dataNumberAttr,
                maxShowBtnCount,
                nextCName,
                disbaleNextCName
            } = state
            let paginationStr = `
                            <ul class="pagination">
                            <li class="${pCName} ${prevCName} ${disbalePrevCName}">上一页</li>
                            <li class="${pCName} ${pageNumberCName} ${activeCName}" ${dataNumberAttr}='1'>1</li>
                            `
                                    if (totalPageCount - 2 > maxShowBtnCount) {
                                        paginationStr += `
                            <li class="${pCName} number-ellipsis ellipsis-head" style="display: none;">...</li>`
                                        for (let i = 2; i < maxShowBtnCount + 2; i++) {
                                            paginationStr += `<li class="${pCName} ${pageNumberCName} ${i === 1 ? activeCName : ''}" ${dataNumberAttr}='${i}'>${i}</li>`
                                        }
                                        paginationStr += `
                            <li class="${pCName} number-ellipsis ellipsis-tail">...</li>
                            <li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${totalPageCount}'>${totalPageCount}</li>
                            `
            } else {
                for (let i = 2; i <= totalPageCount; i++) {
                    paginationStr += `<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${i}'>${i}</li>`
                }
            }
            paginationStr += `<li class="${pCName} ${nextCName}${totalPageCount === 1 ? ' ' + disbaleNextCName : ''}">下一页</li></ul>`
            pageContainer.innerHTML = paginationStr
            // 切换页码
            this.switchPage()
        }
    
        isIllegal(pageNumber) {
            let state = this.state
            return (
                state.pageNumber === pageNumber || Math.ceil(pageNumber) !== pageNumber ||
                pageNumber > state.totalPageCount || pageNumber < 1 ||
                typeof pageNumber !== 'number' || pageNumber !== pageNumber
            )
        }
    
        hiddenEllipse(selector, shouldHidden = true) {
            this.selectorEle(selector).style.display = shouldHidden ? 'none' : ''
        }
    
        selectorEle(selector, all = false) {
            return all ? document.querySelectorAll(selector) : document.querySelector(selector)
        }
    
        hasClass(eleObj, className) {
            return eleObj.classList.contains(className);
        }
    
        addClass(eleObj, className) {
            eleObj.classList.add(className);
        }
    
        removeClass(eleObj, className) {
            if (this.hasClass(eleObj, className)) {
                eleObj.classList.remove(className);
            }
        }
    }  
    const total = localStorage.getItem('total')
    const slp = new SimplePagination(total);
    slp.init({
        container: '.boxs',
        maxShowBtnCount: 3,
        onPageChange: state => {
           getPage(state.pageNumber);
            // console.log('pagination change:', state.pageNumber)
        }
    })
    // document.getElementById('page-go').addEventListener('submit', e => {
    //     e.preventDefault()
    //     slp.gotoPage(+document.getElementById('page-num').value)
    // })